<template>
  <div class="tabbar">
    <van-tabbar v-if="tabbarShow" v-model="activeTab">
      <van-tabbar-item
        v-for="(item, key) in tabbarConfig"
        :key="key"
        :name="item.path"
        :to="{ path: item.path }"
        :icon="item.icon">
        {{ item.name }}
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import Vue from 'vue';
import tabbarConfig from '@/configs/tabbar'
import { Tabbar, TabbarItem } from 'vant';
Vue.use(Tabbar);
Vue.use(TabbarItem);

export default {
  name: "TabBar",
  data() {
    return {
      activeTab: '/index',
    }
  },
  computed: {
    tabbarConfig() {
      return tabbarConfig;
    },
    curRoute() {
      return this.$route.path;
    },
    tabbarShow() {
      const tabBarPaths = tabbarConfig.map(item => item.path);
      return tabBarPaths.includes(this.curRoute);
    },
  },
  watch: {
    $route() {
      this.activeTab = this.curRoute;
    }
  },
};
</script>
